<section class="section" id="button">
  <h1 class="title"> Button </h1>
  <hr>
  <div class="columns">
    <div class="column">
      <div class="block">
        <a class="button"> Button </a>
        <a class="button is-white"> White </a>
        <a class="button is-light"> Light </a>
        <a class="button is-dark"> Dark </a>
        <a class="button is-black"> Black </a>
        <a class="button is-link"> Link </a>
        <a class="button is-text"> Link </a>
      </div>
      <div class="block">
        <a class="button is-primary"> Primary </a>
        <a class="button is-info"> Info </a>
        <a class="button is-success"> Success </a>
        <a class="button is-warning"> Warning </a>
        <a class="button is-danger"> Danger </a>
      </div>
      <div class="block">
        <a class="button is-focused"> Focus </a>
        <a class="button is-primary is-focused"> Focus </a>
        <a class="button is-info is-focused"> Focus </a>
        <a class="button is-success is-focused"> Focus </a>
        <a class="button is-warning is-focused"> Focus </a>
        <a class="button is-danger is-focused"> Focus </a>
      </div>
      <div class="block">
        <a class="button is-hovered"> Hover </a>
        <a class="button is-primary is-hovered"> Hover </a>
        <a class="button is-info is-hovered"> Hover </a>
        <a class="button is-success is-hovered"> Hover </a>
        <a class="button is-warning is-hovered"> Hover </a>
        <a class="button is-danger is-hovered"> Hover </a>
      </div>
      <div class="block">
        <a class="button is-active"> Active </a>
        <a class="button is-primary is-active"> Active </a>
        <a class="button is-info is-active"> Active </a>
        <a class="button is-success is-active"> Active </a>
        <a class="button is-warning is-active"> Active </a>
        <a class="button is-danger is-active"> Active </a>
      </div>
      <div class="block">
        <a class="button is-loading"> Loading </a>
        <a class="button is-primary is-loading"> Loading </a>
        <a class="button is-info is-loading"> Loading </a>
        <a class="button is-success is-loading"> Loading </a>
        <a class="button is-warning is-loading"> Loading </a>
        <a class="button is-danger is-loading"> Loading </a>
      </div>
      <p class="field">
        <a class="button">
          <span class="icon is-small"> <i class="fa fa-bold"> </i> </span>
        </a>
        <a class="button">
          <span class="icon is-small"> <i class="fa fa-italic"> </i> </span>
        </a>
        <a class="button">
          <span class="icon is-small"> <i class="fa fa-underline"> </i> </span>
        </a>
        <a class="button">
          <span class="icon"> <i class="fa fa-github"> </i> </span>
          <span> GitHub </span>
        </a>
        <a class="button is-primary">
          <span class="icon"> <i class="fa fa-twitter"> </i> </span>
          <span> Twitter </span>
        </a>
        <a class="button is-success">
          <span class="icon is-small"> <i class="fa fa-check"> </i> </span>
          <span> Save </span>
        </a>
        <a class="button is-danger is-outlined">
          <span> Delete </span>
          <span class="icon is-small"> <i class="fa fa-times"> </i> </span>
        </a>
      </p>
      <div class="field is-grouped">
        <p class="field has-addons">
          <a class="button">
            <span class="icon is-small"> <i class="fa fa-bold"> </i> </span>
            <span> Bold </span>
          </a>
          <a class="button">
            <span class="icon is-small"> <i class="fa fa-italic"> </i> </span>
            <span> Italic </span>
          </a>
          <a class="button">
            <span class="icon is-small"> <i class="fa fa-underline"> </i> </span>
            <span> Underline </span>
          </a>
        </p>
        <p class="field has-addons">
          <a class="button">
            <span class="icon is-small"> <i class="fa fa-align-left"> </i> </span>
            <span> Left </span>
          </a>
          <a class="button">
            <span class="icon is-small"> <i class="fa fa-align-center"> </i> </span>
            <span> Center </span>
          </a>
          <a class="button">
            <span class="icon is-small"> <i class="fa fa-align-right"> </i> </span>
            <span> Right </span>
          </a>
        </p>
      </div>
    </div>
    <div class="column">
      <div class="block">
        <a class="button is-small"> Small </a>
        <a class="button"> Normal </a>
        <a class="button is-medium"> Medium </a>
        <a class="button is-large"> Large </a>
      </div>
      <div class="block">
        <a class="button is-outlined"> Outlined </a>
        <a class="button is-primary is-outlined"> Outlined </a>
        <a class="button is-info is-outlined"> Outlined </a>
        <a class="button is-success is-outlined"> Outlined </a>
        <a class="button is-danger is-outlined"> Outlined </a>
      </div>
      <div class="notification is-primary">
        <a class="button is-primary is-inverted is-outlined"> Invert Outlined </a>
        <a class="button is-info is-inverted is-outlined"> Invert Outlined </a>
        <a class="button is-success is-inverted is-outlined"> Invert Outlined </a>
        <a class="button is-danger is-inverted is-outlined"> Invert Outlined </a>
      </div>
      <div class="notification is-primary">
        <a class="button is-primary is-inverted"> Inverted </a>
        <a class="button is-info is-inverted"> Inverted </a>
        <a class="button is-success is-inverted"> Inverted </a>
        <a class="button is-danger is-inverted"> Inverted </a>
      </div>
      <p class="field">
        <a class="button is-small">
          <span class="icon is-small"> <i class="fa fa-github"> </i> </span>
          <span> GitHub </span>
        </a>
        <a class="button">
          <span class="icon"> <i class="fa fa-github"> </i> </span>
          <span> GitHub </span>
        </a>
        <a class="button is-medium">
          <span class="icon"> <i class="fa fa-github"> </i> </span>
          <span> GitHub </span>
        </a>
        <a class="button is-large">
          <span class="icon is-medium"> <i class="fa fa-github"> </i> </span>
          <span> GitHub </span>
        </a>
      </p>
      <p class="field">
        <a class="button is-small">
          <span class="icon is-small"> <i class="fa fa-header"> </i> </span>
        </a>
      </p>
      <p class="field">
        <a class="button">
          <span class="icon is-small"> <i class="fa fa-header"> </i> </span>
        </a>
        <a class="button">
          <span class="icon"> <i class="fa fa-header"> </i> </span>
        </a>
      </p>
      <p class="field">
        <a class="button is-medium">
          <span class="icon is-small"> <i class="fa fa-header"> </i> </span>
        </a>
        <a class="button is-medium">
          <span class="icon"> <i class="fa fa-header"> </i> </span>
        </a>
        <a class="button is-medium">
          <span class="icon is-medium"> <i class="fa fa-header"> </i> </span>
        </a>
      </p>
      <p class="field">
        <a class="button is-large">
          <span class="icon is-small"> <i class="fa fa-header"> </i> </span>
        </a>
        <a class="button is-large">
          <span class="icon"> <i class="fa fa-header"> </i> </span>
        </a>
        <a class="button is-large">
          <span class="icon is-medium"> <i class="fa fa-header"> </i> </span>
        </a>
        <a class="button is-large">
          <span class="icon is-large"> <i class="fa fa-header"> </i> </span>
        </a>
      </p>
    </div>
  </div>
</section>
